<template>
  <div class="workFlow">
    <NavBar />
    <div class="container">
      <div class="template-list">
        <div
          v-for="item in displayList"
          :key="item.id"
          class="template-item"
          @click="handleClick(item)"
        >
          <div class="template-thumb">
            <div class="price-tag">¥{{ item.price }}</div>
            <div class="svip-tag" v-if="item.isSvip">SVIP 专属优惠</div>
            <div class="thumb-overlay">
              <div class="preview-icon">预览</div>
            </div>
            <img :src="item.thumbUrl" alt="模板缩略图" class="thumb-img" />
          </div>
          <div class="template-info">
            <h3 class="template-title">{{ item.title }}</h3>
            <div class="template-meta">
              <div class="author-info">
                <img :src="item.authorAvatar" alt="作者头像" class="author-avatar" />
                <span class="author-name">{{ item.authorName }}</span>
              </div>
              <div class="work-count">{{ item.workCount }} 个作品</div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading" v-if="loading">加载中...</div>
      <div class="no-more" v-if="noMore && !loading">没有更多数据了</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/home/NavBar.vue";
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
interface Template {
  id: number;
  title: string;
  price: number;
  thumbUrl: string;
  isSvip: boolean;
  authorName: string;
  authorAvatar: string;
  workCount: number;
}

const pageSize = 8;
const currentPage = ref(1);
const templateList = ref<Template[]>([]);
const loading = ref(false);
const noMore = ref(false);

// 展示的列表数据
const displayList = computed(() => templateList.value);

// 获取模板列表数据
const fetchTemplateList = async () => {
  if (loading.value || noMore.value) return;

  loading.value = true;
  try {
    // 模拟API请求，实际项目中替换为真实的API调用
    // const res = await http.get('/api/templates', {
    //   params: { page: currentPage.value, pageSize }
    // });

    // 模拟数据
    await new Promise((resolve) => setTimeout(resolve, 800));
    const mockData = generateMockData();

    if (mockData.length === 0) {
      noMore.value = true;
    } else {
      templateList.value = [...templateList.value, ...mockData];
      currentPage.value++;
    }
  } catch (error) {
    console.error("获取模板列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 生成模拟数据
const generateMockData = (): Template[] => {
  // 如果页数大于3，模拟没有更多数据
  if (currentPage.value > 3) return [];

  return Array.from({ length: pageSize }, (_, i) => {
    const id = (currentPage.value - 1) * pageSize + i + 1;
    return {
      id,
      title: `模板${id} - ${["超写实风格视频", "Vlog模板", "多语言配音", "情感画面"][id % 4]}`,
      price: Math.floor(Math.random() * 50 + 20) + 0.99,
      thumbUrl: `https://picsum.photos/300/200?random=${id}`,
      isSvip: id % 3 === 0,
      authorName: `创作者${id % 10}`,
      authorAvatar: `https://i.pravatar.cc/100?img=${id % 10}`,
      workCount: Math.floor(Math.random() * 5) + 1,
    };
  });
};

// 滚动加载更多
const handleScroll = () => {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight - 100 && !loading.value) {
    fetchTemplateList();
  }
};

const handleClick = (item: Template) => {
  console.log(item);
  router.push({
    path: "/workDetail",
    query: {
      id: item.id,
    },
  });
};

onMounted(() => {
  // 初始加载数据
  fetchTemplateList();

  // 添加滚动事件监听
  window.addEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.workFlow {
  padding-top: 60px;
  min-height: 100vh;
  background-color: #f8faff;
}

.container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 0;
}

.template-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.template-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.template-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.template-thumb {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.template-item:hover .thumb-img {
  transform: scale(1.05);
}

.price-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff9500;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

.svip-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #0066ff, #00b3ff);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.template-item:hover .thumb-overlay {
  opacity: 1;
}

.preview-icon {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
}

.template-info {
  padding: 12px;
}

.template-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.loading,
.no-more {
  text-align: center;
  padding: 20px 0;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .template-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .template-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .template-list {
    grid-template-columns: 1fr;
  }
}
</style>
